{extend name="admin@public/layout/popup_form"}

{block name="form"}
<input type="hidden" name="row[is_laytp_addons_group]" value="1" autocomplete="off" />
<style type="text/css">
    .layui-form-mid{padding:0!important;}
    .layui-form-mid code{color:#5FB878;}
    .layui-table{color: #333!important}
    .layui-form-switch{margin-top: 0px;}
</style>
<div class="layui-tab">
    <ul class="layui-tab-title">
        {foreach $config_items['group'] as $k=>$v}
        <li {if $k==0}class="layui-this"{/if}>{$v.name}</span></li>
        {/foreach}
    </ul>
    <div class="layui-tab-content">
        {foreach $config_items['group'] as $gk=>$gv}
        <div class="layui-tab-item {if $gk==0}layui-show{/if}">
            <table class="layui-table" style="margin: 0;" lay-skin="nob">
                <colgroup>
                    <col width="10%">
                    <col width="50%">
                    <col width="40%">
                </colgroup>
                <tbody>
                {foreach $config_items['items'][$gv['key']] as $k=>$v}
                <tr>
                    <td style="text-align:right;
                        {if in_array($v['type'],['textarea','array','image_single','image_multi','ueditor'])}vertical-align:top;{/if}
                        {if in_array($v['type'],['textarea','image_single','image_multi'])}padding-top:18px;{/if}
                        ">
                        {$v.name}
                    </td>
                    <td>
                        {switch ($v['type'])}
                        {case input}
                        <input type="text" name="row[{$gv.key}][{$v.key}]" class="layui-input" value="{:isset($config[$gv['key']][$v['key']])?$config[$gv['key']][$v['key']]:(isset($v['content'])?$v['content']:'')}" autocomplete="off" />
                        {/case}
                        {case textarea}
                        <textarea name="row[{$gv.key}][{$v.key}]" class="layui-textarea">{:isset($config[$gv['key']][$v['key']])?$config[$gv['key']][$v['key']]:(isset($v['content'])?$v['content']:'')}</textarea>
                        {/case}
                        {case select_single}
                        <select name="row[{$gv.key}][{$v.key}]">
                            <option value="">请选择</option>
                            {if is_array($v['content'])}
                            {foreach $v['content'] as $content_k=>$content_v}
                            <option value="{$content_k}"
                                    {php}if(($config[$gv['key']][$v['key']] ? $config[$gv['key']][$v['key']] : $v['default']) == $content_k){{/php}
                            selected="selected"
                            {php}}{/php}
                            >{$content_v}</option>
                            {/foreach}
                            {/if}
                        </select>
                        {/case}
                        {case select_multi}
                        <div class="select_multi"
                             id="{$gv.key}_{$v['key']}"
                             options='{:getSelectMultiJsConst($v["content"])}'
                             name="row[{$gv.key}][{$v.key}]"
                             selected_data='{:json_encode(explode(",",$config[$gv['key']][$v['key']] ? $config[$gv['key']][$v['key']] : $v['default']))}'
                        ></div>
                        {/case}
                        {case radio}
                        {if is_array($v['content'])}
                        <!-- 隐藏域设置开关未选中时需要传递的参数值 -->
                        <input type="hidden" name="row[{$gv.key}][{$v.key}]" value="{:key($v['content'])}" />
                        <input type="checkbox" name="row[{$gv.key}][{$v.key}]" lay-skin="switch"
                               lay-text="{:next($v['content'])}|{:prev($v['content'])}"
                               next-item="{:next($v['content'])}"
                               value="{:key($v['content'])}"
                               {php}if(($config[$gv['key']][$v['key']] ? $config[$gv['key']][$v['key']] : $v['default']) == key($v['content'])){{/php}
                        checked="checked"
                        {php}}{/php} />
                        {/if}
                        {/case}
                        {case image_single}
                        <div class="layui-upload">
                            <div class="layui-inline" style="width: 75%;"><input type="text" class="layui-input" name="row[{$gv.key}][{$v.key}]" id="input_{$gv.key}_{$v['key']}" value="{$config[$gv['key']][$v['key']]}" /></div>
                            <div class="layui-inline">
                                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm pull-left"
                                        id="{$gv.key}_{$v['key']}"
                                        upload="true"
                                        accept="images"
                                        single_multi="single"
                                ><i class="layui-icon">&#xe62f;</i>选择上传</button>
                            </div>
                            <div class="pic-more">
                                <ul class="pic-more-upload-list" id="preview_{$gv.key}_{$v['key']}">
                                    {if $config[$gv['key']][$v['key']]}
                                    <li class="item_img">
                                        <div class="operate">
                                            <i class="upload_img_close layui-icon" file_url_data="{$config[$gv['key']][$v['key']]}" node="{$v['key']}"></i>
                                        </div>
                                        <img src="{$config[$gv['key']][$v['key']]}" class="img">
                                    </li>
                                    {/if}
                                </ul>
                            </div>
                        </div>
                        {/case}
                        {case image_multi}
                        <div class="layui-upload">
                            <div class="layui-inline" style="width: 75%;"><input type="text" class="layui-input" name="row[{$gv.key}][{$v.key}]" id="input_{$gv.key}_{$v['key']}" value="{$config[$gv['key']][$v['key']]}" /></div>
                            <div class="layui-inline">
                                <button type="button" class="layui-btn layui-btn-primary layui-btn-sm pull-left"
                                        id="{$gv.key}_{$v['key']}"
                                        upload="true"
                                        accept="images"
                                        single_multi="multi"
                                ><i class="layui-icon">&#xe62f;</i>选择上传</button>
                            </div>
                            <div class="pic-more">
                                <ul class="pic-more-upload-list" id="preview_{$gv.key}_{$v['key']}">
                                    {if $config[$gv['key']][$v['key']]}
                                    {foreach :explode(",",$config[$gv['key']][$v['key']]) as $key=>$vo}
                                    <li class="item_img">
                                        <div class="operate">
                                            <i class="upload_img_close layui-icon" file_url_data="{$vo}" node="{$v['key']}"></i>
                                        </div>
                                        <img src="{$vo}" class="img">
                                    </li>
                                    {/foreach}
                                    {/if}
                                </ul>
                            </div>
                        </div>
                        {/case}
                        {case video_single}
                        <div class="layui-upload">
                            <div class="layui-inline" style="width: 75%;"><input type="text" class="layui-input" name="row[{$gv.key}][{$v.key}]" id="input_{$gv.key}_{$v['key']}" value="{$config[$gv['key']][$v['key']]}" /></div>
                            <div class="layui-inline">
                                <button type="button" class="layui-btn layui-btn-sm layui-btn-primary pull-left"
                                        id="{$gv.key}_{$v['key']}"
                                        upload="true"
                                        accept="video"
                                        upload_dir=""
                                        single_multi="single">
                                    <i class="layui-icon">&#xe62f;</i>选择上传
                                </button>
                            </div>
                            <div class="pic-more">
                                <ul class="pic-more-upload-list" id="preview_{$gv.key}_{$v['key']}">
                                    {if $config[$gv['key']][$v['key']]}
                                    <li class="item_video">
                                        <video src="{$config[$gv['key']][$v['key']]}" controls="controls" width="200px" height="200px"></video>
                                        <button class="layui-btn layui-btn-sm layui-btn-danger upload_delete" style="display: block; width: 100%;" file_url_data="{$config[$gv['key']][$v['key']]}" node="{$v['key']}"><i class="layui-icon">&#xe640;</i></button>
                                    </li>
                                    {/if}
                                </ul>
                            </div>
                        </div>
                        {/case}
                        {case video_multi}
                        <div class="layui-upload">
                            <div class="layui-inline" style="width: 75%;"><input type="text" class="layui-input" name="row[{$gv.key}][{$v.key}]" id="input_{$gv.key}_{$v['key']}" value="{$config[$gv['key']][$v['key']]}" /></div>
                            <div class="layui-inline">
                                <button type="button" class="layui-btn layui-btn-sm layui-btn-primary pull-left"
                                        id="{$gv.key}_{$v['key']}"
                                        upload="true"
                                        accept="video"
                                        upload_dir=""
                                        single_multi="multi">
                                    <i class="layui-icon">&#xe62f;</i>选择上传
                                </button>
                            </div>
                            <div class="pic-more">
                                <ul class="pic-more-upload-list" id="preview_{$gv.key}_{$v['key']}">
                                    {if $config[$gv['key']][$v['key']]}
                                    {foreach :explode(",",$config[$gv['key']][$v['key']]) as $key=>$vo}
                                    <li class="item_video">
                                        <video src="{$vo}" controls="controls" width="200px" height="200px"></video>
                                        <button class="layui-btn layui-btn-sm layui-btn-danger upload_delete" style="display: block; width: 100%;" file_url_data="{$vo}" node="{$v['key']}"><i class="layui-icon">&#xe640;</i></button>
                                    </li>
                                    {/foreach}
                                    {/if}
                                </ul>
                            </div>
                        </div>
                        {/case}
                        {case file_single}
                        <div class="layui-upload">
                            <div class="layui-inline" style="width: 75%;"><input type="text" class="layui-input" name="row[{$gv.key}][{$v.key}]" id="input_{$gv.key}_{$v['key']}" value="{$config[$gv['key']][$v['key']]}" /></div>
                            <div class="layui-inline">
                                <button type="button" class="layui-btn layui-btn-sm layui-btn-primary pull-left"
                                        id="{$gv.key}_{$v['key']}"
                                        upload="true"
                                        accept="file"
                                        single_multi="single"
                                ><i class="layui-icon">&#xe62f;</i>选择上传</button>
                            </div>
                        </div>
                        {/case}
                        {case file_multi}
                        <div class="layui-upload">
                            <div class="layui-inline" style="width: 75%;"><input type="text" class="layui-input" name="row[{$gv.key}][{$v.key}]" id="input_{$gv.key}_{$v['key']}" value="{$config[$gv['key']][$v['key']]}" /></div>
                            <div class="layui-inline">
                                <button type="button" class="layui-btn layui-btn-sm layui-btn-primary pull-left"
                                        id="{$gv.key}_{$v['key']}"
                                        upload="true"
                                        accept="file"
                                        single_multi="multi"
                                ><i class="layui-icon">&#xe62f;</i>选择上传</button>
                            </div>
                        </div>
                        {/case}
                        {case ueditor}
                        <script editor="true" type="ueditor" id="{$gv.key}_{$v['key']}" name="row[{$gv.key}][{$v.key}]" type="text/plain">{:isset($config[$gv['key']][$v['key']])?html_entity_decode($config[$gv['key']][$v['key']]):(isset($v['content'])?$v['content']:'')}</script>
                        {/case}
                        {case array}
                        <table class="layui-table tableDnd" style="margin: 0;" lay-skin="line">
                            <colgroup>
                                <col width="25%">
                                <col width="70%">
                                <col>
                            </colgroup>
                            <thead>
                            <tr class='nodrop nodrag'>
                                <th>键名</th>
                                <th>键值</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                            {if isset($config[$gv['key']][$v['key']]) && is_array($config[$gv['key']][$v['key']])}
                            {foreach $config[$gv['key']][$v['key']] as $vk=>$vv}
                            <tr>
                                <td style="padding: 4px 15px;"><input class="layui-input" type="text" name="row[{$gv.key}][{$v.key}][key][]" value="{$vk}" /></td>
                                <td style="padding: 4px 15px;"><input class="layui-input" type="text" name="row[{$gv.key}][{$v.key}][value][]" value="{$vv}" /></td>
                                <td style="padding: 4px 15px;">
                                    <a href="javascript:void(0);" class="layui-btn layui-btn-primary layui-btn-sm layui-icon layui-icon-delete del_array_item" layer-tips="删除" title="删除"></a>
                                </td>
                            </tr>
                            {/foreach}
                            {else/}
                            {if isset($v['content']) && is_array($v['content'])}
                            {foreach $v['content'] as $vk=>$vv}
                            <tr>
                                <td style="padding: 4px 15px;"><input class="layui-input" type="text" name="row[{$v.key}][key][]" value="{$vk}" /></td>
                                <td style="padding: 4px 15px;"><input class="layui-input" type="text" name="row[{$v.key}][value][]" value="{$vv}" /></td>
                                <td style="padding: 4px 15px;">
                                    <a href="javascript:void(0);" class="layui-btn layui-btn-primary layui-btn-sm layui-icon layui-icon-delete del_array_item" layer-tips="删除" title="删除"></a>
                                </td>
                            </tr>
                            {/foreach}
                            {/if}
                            {/if}
                            <tr class='nodrop nodrag'>
                                <td colspan="3" style="padding: 4px 15px;">
                                    <a href="javascript:void(0);" class="layui-btn layui-btn-primary layui-btn-sm layui-icon layui-icon-add-1 add_array_item" config_group="{$gv.key}" config_key="{$v.key}" title="追加">追加</a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        {/case}
                        {/switch}
                        </td>
                        <td style="{if in_array($v['type'],['textarea','array','image_single','image_multi','ueditor'])}vertical-align:top;{/if}">
                            <div class="layui-form-mid layui-word-aux">
                                {$v.tip}
                                <br />
                                调用方式<code>Config::get('addons.{$addon_name}.{$gv.key}.{$v.key}')</code>
                            </div>
                        </td>
                </tr>
                {/foreach}
                </tbody>
            </table>
        </div>
        {/foreach}
    </div>
</div>
{/block}

{block name="script"}
<script>
    layui.use(['layTp'],function() {
        const
            layTp = layui.layTp
            , $ = layui.jquery
        ;

        $(document).on('click', '.add_array_item', function () {
            let click_obj = $(this);
            let config_key = click_obj.attr('config_key');
            let config_group = click_obj.attr('config_group');
            layui.laytpl($('#array_item_html').html()).render({
                config_key: config_key,
                config_group: config_group
            }, function (string) {
                click_obj.parent().parent().before(string);
            });
        });

        $(document).on('click', '.del_array_item', function () {
            let click_obj = $(this);
            click_obj.parent().parent().remove();
        });
    });
</script>
{/block}

{block name="js_template"}
<script id="array_item_html" type="text/html">
    <tr>
        <td style="padding: 4px 15px;"><input class="layui-input" type="text" name="row[{{ d.config_group }}][{{ d.config_key }}][key][]" /></td>
        <td style="padding: 4px 15px;"><input class="layui-input" type="text" name="row[{{ d.config_group }}][{{ d.config_key }}][value][]" /></td>
        <td style="padding: 4px 15px;">
            <a href="javascript:void(0);" class="layui-btn layui-btn-primary layui-btn-sm layui-icon layui-icon-delete del_array_item" layer-tips="删除" title="删除"></a>
        </td>
    </tr>
</script>
{/block}